import { useNavigate } from "react-router-dom";
import { NavBar, PullToRefresh, List, Checkbox, InfiniteScroll } from "antd-mobile";
import { useState } from "react";

import { useDispatch, useSelector } from "react-redux";
import { setCitySelect } from "../../store/counterSlice";
import axios from "../../axios/api";


function Query() {
  const [dataList, setDataList] = useState([]);
  const navigate = useNavigate();
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  const [hasMore, setHasMore] = useState(true)
  const [index, setIndex] = useState(1)

  const back = () => {
    navigate(-1);
  };
  const getDataAsync = async () => {
    const res = await axios.post("/api/trip/train", {
      ...counter,
      page: index,
    });
    const { code, data } = res.data
    if (code === 200) {


      setDataList([...dataList, ...data])

      const index = index + 1
      setIndex(index)
      // if (index > 3) {
      //   setHasMore(false)
      // }


    }
  };

  const onRefresh = async () => {
    setIndex(1)
    setHasMore(true)
    setDataList([])
  };
  return (
    <div>
      <NavBar onBack={back}>{counter.start} - {counter.end}</NavBar>
      <div >
        <span >前一天</span>
        <span style={{ marginLeft: '98px' }}>13:23</span>
        <span style={{ float: 'right' }}>后一天</span>
      </div>
      <PullToRefresh onRefresh={onRefresh}>
        <List>
          {dataList.map((item, index) => (
            <List.Item key={index}>
              <div style={{ display: 'flex' }}>
                <div >
                  <div>{item.startTime}</div>
                </div>
                <div style={{ marginLeft: '20px' }}>
                  <div>

                    {item.start}
                  </div>
                  <p>
                    {item.end}
                  </p>
                </div>
                <div style={{ marginLeft: '20px' }}>
                  <div>G103</div>
                  <p>5时38分</p>
                </div>
                <div style={{ marginLeft: '20px' }}>
                  <div>￥ {item.tick?.secondTick} </div>
                  <p>{item.isSeat ? '有票' : '无票'}</p>
                </div>
              </div>
            </List.Item>
          ))}
        </List>

        <InfiniteScroll loadMore={getDataAsync} hasMore={hasMore} threshold={0} />
      </PullToRefresh>
      <div >
        <Checkbox

          checked={counter.isDesc}
          icon={() => ""}
          onChange={(checked) => {
            dispatch(
              setCitySelect({ type: "isDesc", val: checked })
            );
            setIndex(1)
            setHasMore(true)
            setDataList([])
          }}
        >
          <div >出发 早-晚</div>
        </Checkbox>
        <Checkbox

          icon={() => ""}
          checked={counter.isSpeed}
          onChange={(checked) => {
            dispatch(
              setCitySelect({ type: "isSpeed", val: checked })
            );
            setIndex(1)
            setHasMore(true)
            setDataList([])
          }}
        >
          <div>只看高铁/动车</div>
        </Checkbox>
        <Checkbox

          icon={() => ""}
          checked={counter.isSeat}
          onChange={(checked) => {
            dispatch(
              setCitySelect({ type: "isSeat", val: checked })
            );
            setIndex(1)
            setHasMore(true)
            setDataList([])
          }}
        >
          <div>只看有票</div>
        </Checkbox>
      </div>
    </div>
  );
}

export default Query;
